<template>
  <el-dialog :visible="showPermission" title="分配权限" @close="close">
    <!-- 树形组件 -->

    <!-- 
      data 展示数据
      props 默认通过label来展示数据 通过props来修改
      default-checked-keys 默认勾选的节点的 key 的数组
      node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
      check-strictly 为false 父选什么子就得选什么 为true 就互不影响
      show-checkbox 是否以复选框的形式展示
      default-expand-all 是否默认展开所有节点

     -->
    <el-tree
    
    ref="permTree"
    :data="list"
    :props="props"
    :default-checked-keys="roleIdList"
    node-key="id"
    check-strictly 
    show-checkbox
    default-expand-all/>

    <!-- 插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btn">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionList } from "@/api/permission";
import { getRoleDetail,assignPerm } from '@/api/setting'
import { tranListToTreeData } from "@/utils";
export default {
  name: 'permission',
  data () {
    return {
      list: [], // 权限的数据
      props: {
        label: 'name'
      },
      roleIdList: [], // 默认选中的数据
      roleId: null // 权限ID
    }
  },
  created () {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      this.list = tranListToTreeData(await getPermissionList(), '0')
    },
    async getRoleDetail(id) {
      const { permIds } = await getRoleDetail(id)
      this.roleId = id
      this.roleIdList = permIds
    },
    async btn() {
      /**
       * getCheckedKeys 
       * 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
       */
      const permIds = this.$refs.permTree.getCheckedKeys()
      await assignPerm({ permIds, id: this.roleId })
      this.$message.success('权限分配成功')
      this.$emit('update:showPermission',false)
    },
    close() {
      this.roleIdList = [] // 将默认数据清空
      // 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      //(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 
      //2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
      this.$refs.permTree.setCheckedKeys(this.roleIdList)
      this.$emit('update:showPermission',false)
    }
  },
  props: {
    showPermission: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>

</style>